<template>
	<!-- 
	 本页,逻辑依旧不清晰
	 如dielog 框,  想使用一个框, 那么就需要,讲点击事件 和 展示dielog框分开,因为要改名字,在点击的收改
	 简单的逻辑不清晰, 如多选框, elementt 他给的师数组, 我可以使用 join 合并为字符串呀
	 卡壳后不知道跟那啥, 快捷键很多但是.. 不要使用鼠标,依赖太高太费眼.
	 -->
	<div class="main">
		<div class="header">
			<div class="title">教师管理</div>
			<div class="改标签lh"><button type="button" @click="add">添加教师</button></div>
			<div class="input">
				<!-- <input v-model="params.name" @change="getList" placeholder="请输入内容"/> -->
				<el-autocomplete
					class="inline-input"
					v-model="state"
					:fetch-suggestions="querySearch"
					placeholder="请输入内容"
					:trigger-on-focus="false"
					@select="handleSelect"
				></el-autocomplete>
			</div>
		</div>
		
		<div class="table">
			 <el-table
			    ref="multipleTable"
			    :data="list"
			    tooltip-effect="dark"
			    style="width: 100%"
					v-loading="loading">
			    <el-table-column type="selection" width="55"> </el-table-column>
			    <el-table-column prop="id" label="id" width="120"> </el-table-column>
			    <el-table-column prop="companyid" label="一个id" width="120"> </el-table-column>
			    <el-table-column prop="name" label="讲师名称" width="120"> </el-table-column>
			    <el-table-column prop="tel" label="手机号码"> </el-table-column>
			    <el-table-column prop="wechat" label="不知道啥东西"> </el-table-column>
			    <el-table-column label="操作"> 
						<template #default="scope">
							<el-button type="text" @dblclick="del(scope.row.id)">删除</el-button>
							<el-button type="text" @click="upd(scope.row)">修改</el-button>
						</template>
					</el-table-column>					
			  </el-table>
		</div>
		
		<div class="page">
			<div class="block">
			     
			    <el-pagination
			          @size-change="handleSizeChange"
			          @current-change="handleCurrentChange"
			          :page-sizes="[1,2,5,10]"
			          :page-size="params.psize"
			          layout="total, sizes, prev, pager, next, jumper"
			          :total="pmaxNum">
			        </el-pagination>
			  </div>
		</div>
	</div>
	
	<!-- 添加/修改 start -->
	<el-dialog :title="isName+'教师'" v-model="dialogFormVisible">
	  <el-form :model="form" :rules="rules" ref="form" label-width="80px">
			<div style="width: 300px;">
				<el-form-item label="教师名称" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item>
				<el-form-item label="手机号" prop="tel"> <el-input v-model="form.tel"></el-input> </el-form-item>
				<el-form-item label="微信号" prop="wechat"> <el-input v-model="form.wechat"></el-input> </el-form-item>
				<el-form-item label="教师类型">
					<el-checkbox-group v-model="che">
						<el-checkbox @change="checks" label="主讲老师"></el-checkbox>
						<el-checkbox @change="checks" label="助教老师"></el-checkbox>
					</el-checkbox-group>
				</el-form-item>
				<el-form-item style="position: absolute;top: 80px;right: 100px;">
					<el-upload
					  action="#"
					  list-type="picture-card"
					  :auto-upload="false"
					>
					    <template #default>
					      <i class="el-icon-plus"></i>
					    </template>
					    <template #file="{file}">
					      <div>
					        <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
					        <span class="el-upload-list__item-actions">
					          <span
					            class="el-upload-list__item-preview"
					            @click="handlePictureCardPreview(file)"
					          >
					            <i class="el-icon-zoom-in"></i>
					          </span>
					          <span
					            v-if="!disabled"
					            class="el-upload-list__item-delete"
					            @click="handleDownload(file)"
					          >
					            <i class="el-icon-download"></i>
					          </span>
					          <span
					            v-if="!disabled"
					            class="el-upload-list__item-delete"
					            @click="handleRemove(file)"
					          >
					            <i class="el-icon-delete"></i>
					          </span>
					        </span>
					      </div>
					    </template>
					</el-upload>
					<el-dialog v-model="dialogVisible">
					  <img width="100%" :src="dialogImageUrl" alt="">
					</el-dialog>
				</el-form-item>
			</div>
	  </el-form>
	  <template #footer>
	    <span class="dialog-footer">
	      <el-button @click="delDialog('form')">取 消</el-button>
	      <el-button type="primary" @click="addAndUpd('form')">确 定</el-button>
	    </span>
	  </template>
	</el-dialog>
	<!-- 添加/修改 end -->
	
</template>

<script>
	 export default {
		data() {
			const querySearch = (queryString, cb) => {
				this.params.name = queryString
				this.params.psize = 10
				let self = this
				this.axios.get('http://www.eshareedu.cn/edusystems/api/teachers/list',{params: this.params}).then(res => { 
					if(res.data.errCode != '10000') return this.$message.error('列表获取失败')

					let data = [];
					res.data.data.list.forEach(item => {
						data.push({
							// 'id': item.id,
							'value': item.name
						})
					})
					
					cb(data);
				})
			};
			const handleSelect = (item) => {
				/** 第二步 用户选择了一个
				 * 数据会返回到这里
				 */
				this.params.name = item.value
				this.getList()
			};
			return {
				// 搜索 header
				state: '',
				querySearch,
				handleSelect,
				
				// table 表
				list: [],
				loading: true,
				
				// 添加/修改
				isName: '',
				dialogFormVisible: false,
				form:{
					type: '主讲老师'
				},
				rules: {
					name: [
						{ required: true, message: '请输入活动名称', trigger: 'blur' },
						{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
					],
				},
				che: ['主讲老师'],
				
				// 展示列表 条件
				params: {
					name: '',
					cat:0,
					page:1,
					psize:2
				},
				pmaxNum: 0,
				
				// 添加 - 图片
				dialogImageUrl: '',
				dialogVisible: false,
				disabled: false,
			}
		},
		created(){
			this.getList();
		},
		methods:{
			getList(){
				/**
				 * 加载列表
				 */
				var self = this
				this.axios.get('http://www.eshareedu.cn/edusystems/api/teachers/list',{params: this.params}).then(res => { 
					this.loading = false
					if(res.data.errCode != '10000') return this.$message.error('列表获取失败')

					this.pmaxNum = res.data.data.counts
					this.list = res.data.data.list
				})
			},
			
			
			async del(id){
				/**
				 * 单删
				 */
				const { data:res } = await this.$http.get('http://www.eshareedu.cn/edusystems/api/teachers/delete',{params:{id:id}})
				if(res.errCode != '10000') return this.$message.error('删除失败')
				
				this.$message.success('删除成功')
				this.getList()
			},
			
			
			add(){
				/**
				 * 展示 添加
				 */
				this.isName = '添加'
				this.form = {type: '主讲老师'}
				this.dialogFormVisible = true
			},
			
			
			upd(data){
				/**
				 * 修改
				 */
				for(let i in data){
					this.form[i] = data[i]
				}
				
				this.isName = '修改'
				this.dialogFormVisible = true
			},
			
			
			async addAndUpd(form){
				/**
				 * 执行 修改/添加
				 */
				var isform = ''
				this.$refs.form.validate(res => { isform = res })
				if(!isform) return
				
				const { data:res } = await this.$http.post('http://www.eshareedu.cn/edusystems/api/teachers/add', this.form)
				if(res.errCode != '10000') return this.$message.error(this.isName+'失败')
				
				this.$message.success(this.isName+'成功')
				this.loading = true
				this.getList();
				this.delDialog(form)
			},
			
			
			delDialog(form){
				/** 直接表单赋值,在哎...
				 * 关闭 添加框清空内容
				 */
				this.che = ['主讲老师']
				this.dialogFormVisible = false
				this.$refs[form].resetFields();
			},
			
			
			checks(){
				/**
				 * 生成字符串
				 */
				this.form.type = this.che.join(',')
			},
			
			
			// 页码
			handleSizeChange(val) {
				this.params.psize = val
				this.getList()
			},
			handleCurrentChange(val) {
				this.params.page = val
				this.getList()
			},
			
			
			// 添加 - 图片的
			handleRemove(file) {
				console.log(file);
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleDownload(file) {
				console.log(file);
			},
		}
	}
</script>

<style lang="less" scoped>
	.main{
		width: 100%;
		height: 100%;
		overflow: hidden;
		.header{
			height: 60px;
			display: flex;
			align-items: center;
			background-color: white;
			.title{
				width: 100px;
				height: 60px;
				line-height: 60px;
				background-color: #eee;
			}
		}
		.header>div{
			margin-right: 20px;
			text-align: center;
		}
		.page{
			display: flex;
			flex-direction: row-reverse;
		}
	}
</style>
